<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{box-sizing: border-box;}
			span{display: inline-block;}
			.alert{width: 500px;background-color: #fbfbfb;border:1px solid #ccc;}
			.tips{position:relative;height: 40px;line-height: 40px;padding: 0 15px;}
			.content{min-height: 100px;padding: 0 15px;}
			.close{position:absolute;top:5px;right:5px;width: 20px;height: 20px;float: right;background: url('./images/close.png') no-repeat center center;}
			.footer{height: 60px;padding: 15px;}
			.button{height: 100%;line-height:30px;text-align:center;float:right;width: 60px;background-color: #5a97ff;color: #fff;}
		</style>
	</head>
	<body>
		<div class="alert">
			<div class="tips">此网页显示：<span class="close">	</span></div>
			<div class="content">111</div>
			<div class="footer">
				<span class="button">确定</span>
			</div>
		</div>
		<script type="text/javascript">
			var [0,1,2];石头 剪刀 布
			var [0,1,2];剪刀 布   石头
			0  平手
 			-1,2 赢了
 			1,-2 输了  

 			{
 				'0':'平手'
 			}

 			<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.slide{position:relative;width: 320px;height: 480px;}
			.slide img{width: 100%;height: 100%;}
			.dot{position: absolute;height: 20px;width: 100%;left:0;bottom: 0;background-color: rgba(0,0,0,0.5);padding: 4px 0;text-align: center;}
			.dot span{display: inline-block;height: 12px;width: 12px;background-color: #fff;}
			.dot .active{background-color: #e33;}
			.prev,.next{position:absolute;top:215px;height: 50px;width: 50px;cursor: pointer;}
			.prev{left:10px;background: url('./images/prev.png') no-repeat center center / 100% auto;}
			.next{right:10px;background: url('./images/next.png') no-repeat center center / 100% auto;}
		</style>
	</head>
	<body>
		<div class="slide">
			<img src="./images/1.jpg" id="img">
			<div class="dot">
				<span class="active" id="1"></span>
				<span id="2"></span>
				<span id="3"></span>
			</div>
			<div class="btn prev" id="prev"></div>
			<div class="btn next" id="next"></div>
		</div>
		<script type="text/javascript">
			// 轮播图方法之一 改变图片路径法
			var img = document.getElementById('img');
			console.dir(img);
			var i = 1;
			var timer = null;
			function slideStart(){
				timer = setInterval(function(){
					if(i > 3){
						i = 1;
					}
					document.getElementById(i).classList.add('active'); // 第一步：让当前显示的图片对应的圆点变色
					for(var j = 1;j < 4;j++){ // 循环遍历图片数量，把跟当前图片数字不一样的圆点样式移除
						if(j !== i){
							document.getElementById(j).classList.remove('active');
						}
					}
					img.src = './images/'+i+++'.jpg';
					console.log(i);
				},2000);
			}
			slideStart();

			document.getElementById('next').onclick = function(){
				clearInterval(timer);
				if(i > 3){
					i = 1;
				}
				img.src = './images/'+i+++'.jpg';
				console.log(i);
				slideStart();
			}

			document.getElementById('prev').onclick = function(){
				clearInterval(timer);
				if(i < 2){
					i = 4;
				}
				img.src = './images/'+--i+'.jpg';
				console.log(i);
				slideStart();
			}
		</script>
	</body>
</html>
		</script>
	</body>
</html>